<template>
	<u-overlay :show="show">
		<view class="share ph-32 pt-32 pb-40">
			<view class="ph-32 pt-32 pb-40">
				<image :src="detail.picUrl" class="w-f h-686" mode="widthFix"></image>
				<view class="mt-28 fs-36 fw-600 text-color4">{{ detail.name }}</view>
				<view class="mt-8">
					<text class="fs-36 text-color8">¥</text>
					<text class="fs-48 fw-600 text-color8">{{ detail.price }}</text>
					<text class="fs-24 text-color3 old-price">原价 ¥{{ detail.originalPrice }}</text>
				</view>
				<view class="f jc-s-b mt-48">
					<button type="default" open-type="share">
						<view class="f fd-c ai-c">
							<image src="http://cwht.ricecs.cn/app/shop/wx.png" class="w-96 h-96 mb-16"></image>
							<view class="fs-24 text-color3 mt-16 fw-400">微信</view>
						</view>
					</button>
					<!-- <view class="box f fd-c ai-c">
                        <image src="http://cwht.ricecs.cn/app/shop/pyq.png" class="w-96 h-96 mb-16"></image>
                        <view class="fs-24 text-color3">朋友圈</view>
                    </view> -->

					<!-- <view class="box f fd-c ai-c">
                        <image src="http://cwht.ricecs.cn/app/shop/link.png" class="w-96 h-96 mb-16"></image>
                        <view class="fs-24 text-color3">复制链接</view>
                    </view> -->
					<view class="box f fd-c ai-c" @click="generatePost">
						<image src="http://cwht.ricecs.cn/app/shop/post.png" class="w-96 h-96 mb-16"></image>
						<view class="fs-24 text-color3">生成海报</view>
					</view>
					<!-- <view class="box f fd-c ai-c">
                        <image src="http://cwht.ricecs.cn/app/shop/wb.png" class="w-96 h-96 mb-16"></image>
                        <view class="fs-24 text-color3">微博</view>
                    </view> -->
				</view>
			</view>
			<view class="cancel w-f h-98 f ai-c jc-c fs-32 fw-600 text-color4" @click="show = false">取消</view>
		</view>
	</u-overlay>
	<u-overlay :show="showPost">
		<view class="w-f f ai-c jc-c post fd-c" v-if="showPost">
			<Poster @success="posterSuccess" :imgSrc="detail.picUrl[0]" :QrSrc="erweimapath" :Title="detail.name"
				:PriceTxt="detail.price" :OriginalTxt="detail.originalPrice" :LineType="false" :Width="450" />


			<view class="w-f h-300"></view>
		</view>

		<view class="share">
			<view class="ph-32 pt-32 pb-40">
				<view class="f jc-s-b mt-48">
					<!-- #ifdef MP-WEIXIN -->
					<!-- 微信 -->

					<button class="box2 f fd-c ai-c u-reset-button" open-type="share">
						<image src="http://cwht.ricecs.cn/app/shop/wx.png" class="w-96 h-96 mb-16"></image>
						<view class="fs-24 text-color3">微信</view>
					</button>
					<!-- <view class="box2 f fd-c ai-c">
						    <image src="http://cwht.ricecs.cn/app/shop/pyq.png" class="w-96 h-96 mb-16"></image>
						    <view class="fs-24 text-color3">朋友圈</view>
						</view> -->

					<!-- #endif -->

					<!--  <view class="box2 f fd-c ai-c">
                        <image src="http://cwht.ricecs.cn/app/shop/qq.png" class="w-96 h-96 mb-16"></image>
                        <view class="fs-24 text-color3">QQ好友</view>
                    </view> -->
					<view class="box2 f fd-c ai-c" @click="keepTap">
						<image src="http://cwht.ricecs.cn/app/shop/keep.png" class="w-96 h-96 mb-16"></image>
						<view class="fs-24 text-color3">保存图片</view>
					</view>
				</view>
			</view>
			<view class="cancel w-f h-98 f ai-c jc-c fs-32 fw-600 text-color4" @click="showPost = false">取消</view>
		</view>
	</u-overlay>
</template>
<script setup lang="ts">
	import Poster from '@/components/cc-poster/index.vue';
	import { ref, toRefs } from 'vue';
	import { onShareAppMessage } from '@dcloudio/uni-app';
	const props = defineProps({
		detail: {
			type: Object,
		},
	});
	const { detail } = toRefs(props);
	const show = ref(false);
	const showPost = ref(false);
	const tempFilePath = ref('');
	const haibaoImg = ref(null);
	const modalName = ref('');
	const haibaoShow = ref(false);
	const erweimapath = ref('https://www.xinhuanet.com/politics/2016-07/19/5119875106653616178_11n.jpg');
	const goods = ref({
		itemid: '2nNozWXiotnRwxGUakBuXUD-0npyN5GSNmYDb0pgTxw',
		itemtitle: '产品名称',
		itemprice: '39.90',
		todaysale: '3',
		itempic: 'https://img.alicdn.com/imgextra/i1/2742920221/O1CN01nFqqJ41DVGNfjYMmu_!!2742920221.jpg',
		itemendprice: '29.91',
	});
	onShareAppMessage((res : any) => {
		if (res.from === 'button') {
			// 判断分享是否来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: detail.value.name,
			imageUrl: detail.value.picUrl,
			path: '/pages_shop/productDetails/index?id=' + detail.value.id,
		};
	});
	const getShow = () => {
		show.value = true;
	};
	const posterSuccess = (data : any) => {
		console.log(data, 123123)
		tempFilePath.value = data.tempFilePath;
	};
	const keepTap = () => {
		uni.getImageInfo({
			src: tempFilePath.value,
			success: function (image) {
				uni.saveImageToPhotosAlbum({
					filePath: image.path,
					success: function () {
						console.log('save success');
						uni.showToast({
							title: '海报已保存相册',
							icon: 'success',
							duration: 2000,
						});
					},
				});
			},
		});
	};
	const generatePost = () => {
		show.value = false;
		showPost.value = true;
		console.log(detail)
		showModal();
	};
	function showModal() {
		if (!haibaoImg.value) {
			haibaoShow.value = true;

			uni.showLoading({
				title: '海报生成中...',
			});
		} else {
			modalName.value = 'Image';
		}
	}

	defineExpose({
		getShow: getShow,
	});
</script>
<style lang="scss" scoped>
	::v-deep button {
		padding: 0;
		margin: 0;
		background-color: #fff;
		line-height: 0;
		width: 20%;
		height: 154rpx;
	}

	.post {
		height: 100%;
	}

	.share {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		border-radius: 24rpx 24rpx 0 0;
		background: #fff;

		.cancel {
			border-top: 1px solid #f5f5f5;
		}

		.box2 {
			width: 25%;
		}

		.box {
			width: 20%;
		}

		.old-price {
			text-decoration: line-through;
		}
	}
</style>